var $music = $('#music')[0];
// console.log($music)
var isDraging = false;
var widthP = $('.progressBar').width();
var wE = $('#playedT').width();
// console.log(widthP);
//给进度条绑定事件
$music.addEventListener("timeupdate", function(s){
  setTime();
  if(isDraging) {
    return;
  }
  var left = $music.currentTime/$music.duration*widthP + "px";
  $('#playedO').css('width',left);
  $('#ball').css('left',left);
});
//进度条事件
$("#ball").on("touchstart", function(ev) {
  var e = ev.originalEvent.changedTouches[0];
  var x = e.clientX;
  var ballLeft = $("#ball")[0].offsetLeft;
  isDraging = true;
  $(document).on("touchmove.aaaa" , function(ev) {
    setTime();
    var e = ev.originalEvent.changedTouches[0];
    var left = ballLeft + e.clientX - x;
    $("#ball").css("left", left + "px");
    $('#playedO').css('width',left + "px");
    $music.currentTime = left/widthP*$music.duration;
    ev.originalEvent.preventDefault();
  });
  $(document).on("touchend.aaaa", function(ev) {
    isDraging = false;
    $(document).off(".aaaa");
  });
});

//播放和暂停事件
var flag = true;
$('#playORpause').on('click',function(){
  setTime();
  if(flag){
    $music.play();
    $('.container .picShow img').css({
      animation:" rotate 10s linear infinite"
    })
    $(this).html('&#xe603;');
  }else{
    $music.pause();
    $('.container .picShow img').css({
      animationPlayState:" paused"
    })
    $(this).html('&#xe60b;');
  }
  flag = !flag;
})

//设置时间
function setTime(){
  var startTime = $music.currentTime;
  var endTime = $music.duration;
  var sm =("0"  + Math.floor(startTime/60)).substr(-2);
  var ss = ("0" + Math.floor(startTime%60)).substr(-2);
  var em = ("0" + Math.floor(endTime/60)).substr(-2);
  var es = ("0" + Math.floor(endTime%60)).substr(-2);
  // console.log(startTime,endTime)
  $('#startTime').html(sm+':'+ss);
  $('#endTime').html(em+':'+es);
}

//判断手机型号】
// if(navigator.userAgent.indexOf('iPhone')!=-1){
//   ...
// }
